<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <h1>2019 GDP Top 5</h1>
  <div class="container">
    <!-- bar1 -->
    <Bar1 :gdp="gdpRef" />
    <!-- bar2 -->
    <Bar2 :gdp="gdpRef" />
  </div>
  <div class="controls">
    <div class="item" v-for="r in gdpRef" :key="r.country">
      <label>{{ r.country }}</label>
      <input type="number" step="0.001" min="0" v-model="r.value" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Bar1 from "./components/Bar1.vue";
import Bar2 from "./components/Bar2.vue";
export default {
  components: { Bar1, Bar2 },
  setup() {
    const gdpRef = ref([]);

    onMounted(async () => {
      gdpRef.value = await fetch("/api/gdp.json").then((r) => r.json());
    });

    return { gdpRef };
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.controls {
  margin: 1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  margin: 1em;
}
.item label {
  margin: 0 1em;
}
.item input {
  height: 26px;
  font-size: 14px;
}
h1 {
  text-align: center;
}
</style>
